<script setup>
import {onMounted, reactive, ref} from "vue";
import {getProducts} from "@/api/travel.js";

let travelData = reactive({
  products: []
});

const small = ref(false);
const background = ref(false);

async function getProductsList() {
  const {data: res} = await getProducts();

  if (res && res.code === 200) {
    travelData.products = res.data;
  }
}

onMounted(() => {
  getProductsList();
});
</script>

<template>
  <div class="list-container">
    <el-row :gutter="15">
      <el-col
          v-for="(item, index) in travelData.products.records"
          :key="item.id"
          :span="8"
      >
        <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px">
          <el-image
              style="width: 100%; height: 100%"
              :src="item.url"
              :preview-src-list="srcList"
              fit="cover"
          >
            <template #placeholder>
              <div class="image-slot">
                Loading<span class="dot">...</span>
              </div>
            </template>
          </el-image>
          <div style="padding: 14px;">
            <div style="display: flex;justify-content: space-between">
              <div>{{ item.name }}</div>
              <div><h3 style="color: red">{{ item.price }}￥</h3></div>
            </div>
            <div class="bottom">
              <div class="time">{{ item.introduction }}</div>
              <el-button text class="button">详情</el-button>
              <el-button text class="button">预定</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="width: 100%;height:100px;display: flex;justify-content: center">
      <el-pagination
          v-model:current-page="travelData.products.pageNum"
          v-model:page-size="travelData.products.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :small="small"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="travelData.products.total"
          @size-change="getProductsList"
          @current-change="getProductsList"
      />
    </div>
  </div>
</template>

<style>
.list-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: auto;
  width: 80%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-slot {
  min-width: 300px;
  min-height: 150px;
  text-align: center;
}

.button {
  padding: 0;
  min-height: auto;
}

</style>
